<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myHeadeTitle">
      <el-col :span="10">
        月统计数据
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row class="myBorder">
      <el-row>
        <el-col :span="24" class="myBorderBottom">
          用水统计
        </el-col>
      </el-row>
      <el-row class="myPadding_10px">
        <el-col :span="3" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">78m³</div>
            <div class="myRight">
              <div class="myTop">+15%</div>
              <div class="myBottom">总用水量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="3" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">78m³</div>
            <div class="myRight">
              <div class="myTop">+15%</div>
              <div class="myBottom">节点1</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="myBorder">
      <el-row>
        <el-col :span="24" class="myBorderBottom">
          用电统计
        </el-col>
      </el-row>
      <el-row class="myPadding_10px">
        <el-col :span="4" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">256KW-H</div>
            <div class="myRight">
              <div class="myTop">-1%</div>
              <div class="myBottom">总用电量</div>
            </div>
          </div>
        </el-col>
        <el-col :span="4" class="myBorderRight_1px">
          <div class="myBox">
            <div class="myLeft">256KW-H</div>
            <div class="myRight">
              <div class="myTop">-1%</div>
              <div class="myBottom">节点2</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="myHeadeTitle myTitle">
      <el-col :span="10" class="myLineHeight_35px">
        历史纪录 列表 图表
      </el-col>
      <el-col :span="14" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen">导出</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button class="myBgGreen" @click="onSearchKW">查询</el-button>
      </el-col>
    </el-row>
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <div class="container" style="width:100%; height: 500px"></div>
      </el-col>
    </el-row>
  </div>
</template>  

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myHeadeTitle{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom:10px;
  }
  .myHeadeTitle:before,.myHeadeTitle:after{
    content: " ";
    display: block;
    clear: both;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top: 2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myBorder{
    border:1px solid #dcdcdc;
    margin-bottom: 10px;
  }
  .myBorderBottom{
    border-bottom:1px solid #dcdcdc;
    border-left: 5px solid #00c2a9;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
  }
  .myPadding_10px{
    padding: 10px;
  }
  .myBorderRight_1px{
    border-right:1px solid #dcdcdc;
  }
  .myBox{
    display: flex;
  }
  .myLeft{
    flex: 1;
    vertical-align: middle;
  }
  .myRight{
    flex: 1;
    vertical-align: middle;
  }
  .myLeft{
    text-align: right;
    font-size: 25px;
    padding-top: 6px;
    padding-right: 5px;
    font-weight: 500;
    color: #00c2a9;
  }
  .myRight{
    padding-top: 5px;
  }
  .myTop{
    height: 18px;
  }
  .myColorRed{
    color: #f30;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_35px{
    line-height:45px;
  }
  .myTitle{
    height: 45px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>

<script>
  var highcharts = require('highcharts');
  require('highcharts/highcharts-more')(highcharts);
  require('highcharts/highcharts-3d')(highcharts);
  export default {
     data(){
      return{
        modelOptions:[],
        modelValue:"",
        tableDataList:[],
        kw:"",
        page_size:10,
        page_num:1,
        total:null,
        value1:""
      }
    },
    components: {
        
    },
   
    mounted(){
      document.title = '能耗统计分析';
      
      /*能耗统计图表   start*/
      $(".container").highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: '',//标题
            style:{
              fontSize:"16px"
            }
        },
        xAxis: {
          tickLength: 5,
          tickmarkPlacement: 'on',
          pointStart:0,
          categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
            title: {
                text: ''
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            pointFormat: '{point.y:,.0f}'
        },
        credits:{
          enabled: false  //去掉版权信息
        },
        plotOptions: {
            area: {
              pointStart: 2002,
              marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                  hover: {
                    enabled: false
                  }
                }
              }
            },
            series: {
              lineWidth: 0
            }
          },
          series: [{
            name: '能耗统计',
            data: [5, 6, 55, 20, 30, 6, 11, 10, 20, 30, 20, 10],
            color: '#a7eae1',
            marker: {
              enabled: false,  //去掉折线上圆点
            },
          }]
      });
      /*能耗统计图表   end*/
      
     
    },
    methods:{
      onSearchKW:function(){

      }
    }

  }

</script>  



